<template>
  <el-dialog
    title="基本信息"
    :visible.sync="dialogVisible"
    width="80%"
    :before-close="handleClose"
  >
    <div class="news-add-pop">
      <div class="basic-infos">
        <span class="title">基本信息</span>
        <FormGroup ref="formParams" :search-config="addPopFormConfig" label-width="120px" label-position="right" />
      </div>
      <div class="basic-infos">
        <span class="title">详情</span>
        <EditorCom v-if="dialogVisible" ref="editor" v-model="detail" style="width: 1000px; padding-left: 120px" />
      </div>

    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="handleConfirm">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { TYPE, addPopFormConfig } from '../initData'
import { create, getNewsStudyInfo, updateNewsStudyInfo } from '@/api/content-manage/researchResult.js'
import FormGroup from '@/views/components/FormGroup'
import EditorCom from '@/components/Editor/newEdit.vue'
export default {
  name: 'AddPop',
  components: {
    FormGroup,
    EditorCom
  },
  data() {
    return {
      dialogVisible: false,
      addPopFormConfig: JSON.parse(JSON.stringify(addPopFormConfig)),
      detail: '',
      pageType: '',
      id: ''
    }
  },
  methods: {
    async open({ pageType, columnList, id }) {
      this.pageType = pageType
      this.dialogVisible = true
      this.id = id
      if (this.id) {
        this.getNewsStudyInfo({ columnList })
      } else {
        this.handleGetFormConfig({ columnList })
      }
      this.$refs.formParams && this.$refs.formParams.resetFields()
    },
    async getNewsStudyInfo({ columnList }) {
      const { code, data } = await getNewsStudyInfo({ id: this.id, type: TYPE })
      if (code !== 0) {
        this.addPopFormConfig = addPopFormConfig
        return
      }
      this.handleGetFormConfig({ data, columnList })
    },

    handleGetFormConfig({ data, columnList }) {
      const newConfig = JSON.parse(JSON.stringify(addPopFormConfig))
      if (this.id) {
        const keys = Object.keys(data)
        keys.forEach((v) => {
          newConfig.forEach(ele => {
            if (ele.keyIndex === v) {
              ele.value = data[v]
            }
            if (ele.keyIndex === 'typeId') {
              ele.options = columnList
            }
          })
        })
        this.detail = data.detail
      } else {
        newConfig.forEach(ele => {
          if (ele.keyIndex === 'typeId') {
            ele.options = columnList
          }
        })
      }
      this.addPopFormConfig = newConfig
    },
    handleClose() {
      this.dialogVisible = false
      this.addPopFormConfig = JSON.parse(JSON.stringify(addPopFormConfig))
      this.detail = ''
    },
    async handleConfirm() {
      const fromParams = this.$refs.formParams && await this.$refs.formParams.getParams()
      const detail = this.$refs.editor && this.$refs.editor.getValue()
      if (!detail || detail === '<p><br></p>') {
        this.$message.warning('请编辑文章内容')
        return
      }
      this[this.pageType]({
        ...fromParams,
        detail,
        type: TYPE
      })
    },
    async add(fromParams) {
      const { code, msg } = await create(fromParams)
      if (code !== 0) {
        this.$message.error(msg)
        return
      }
      this.handleSaveSuccess()
    },
    async edit(fromParams) {
      const { code, msg } = await updateNewsStudyInfo({
        ...fromParams,
        id: this.id
      })
      if (code !== 0) {
        this.$message.error(msg)
        return
      }
      this.handleSaveSuccess()
    },
    handleSaveSuccess() {
      this.$message.success('保存成功')
      this.$emit('addSuccess')
      this.dialogVisible = false
      this.addPopFormConfig = addPopFormConfig
      this.detail = ''
    }
  }
}
</script>

<style lang='scss' scoped>
    .news-add-pop {

        .basic-infos {

            .title {
                padding: 3px 10px;
                border-left: 2px solid rgb(20, 165, 232);
                margin-bottom: 20px;
            }
        }
    }
</style>
